<template>
  <div>this is a test!
    <product-child
      v-on:listenToChildEvent="showMessageFromChild"
      @childEvent="parentEvent"
      :parentMsg="title"
      ref="child"
    ></product-child>
    <button @click="getChildEvent">调用子组件方法</button>
    <div v-if="isShow">这里是显示或隐藏的内容</div>
    <button @click="getReverseValue">{{ buttonName }}</button>
    <button @click="getMessage">获取信息</button>
    <div ref="btn">
      <input
        type="text"
        v-model="passValue"
      ><span>组件间传值(传到head){{ passValueToOnther }}</span>
    </div>
    <button @click="setPasswordEncryption">Postgres</button>
    <button>Postgres Password</button>
    <button @click="getUserAddress">Get Email</button>
    <button @click="setUserAddress">Set Email</button>
    <!--列表-->
   <!--  <div class="list">
      <self-table :listData="listData" :tableCols="tableCols" :pagination="pagination" @callFather="callFather">
        <template slot-scope="data">
          <div 
            class="operation"
            @click="handleEdit(data.index, data.row)"
          >
            查看
          </div>
          <div 
            class="operation"
            @click="handleDelete(data.index, data.row)"
          >
            删除
          </div>
      </template>
      </self-table>
    </div> -->
    <!-- <div class="list">
      <circle-chart :chartData="chartData1" :colors="colors1"></circle-chart>
    </div>
    <div class="list1">
      <bar-chart :chartData="chartData2" :compTitle="compTitle1"></bar-chart>
    </div>
    <div class="list1">
      <line-chart :chartData="chartData3" :compTitle="compTitle3"></line-chart>
    </div> -->
  </div>
</template>

<script>
import productChild from "./productChild";
// import SelfTable from "@/common/Table/table";
// import CircleChart from "@/common/Table/circleChart";
// import BarChart from "@/common/Table/barChart";
// import LineChart from "@/common/Table/lineChart";
import axios from "../service/common-service/service";

export default {
  data() {
    return {
      chartOffset: '30%',
      isFormatLegend: true,
      pieOrCircle: '50%',
      title: "这是父组件传给子组件的信息",
      isShow: true,
      buttonName: "隐藏",
      passValue: "",
      twxPsd: "",
      userEmail: {},
      // 请求数据参数
      formInline: {
        pageNum: 1,
        pageSize: 10
      },
      // 分页参数
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      chartData: [
        {value: 335, name: '在线车辆'},
        {value: 310, name: '离线车辆'},
      ],
      chartData1: [
        {value: 335, name: '杭叉', percent: 30},
        {value: 310, name: '海斯特', percent: 30},
        {value: 335, name: '林德', percent: 30},
        {value: 310, name: '永恒力', percent: 30},
      ],
      chartData2: [
        {value: 10, name: '12-01'},
        {value: 52, name: '12-01'},
        {value: 200, name: '12-01'},
        {value: 390, name: '12-01'},
        {value: 330, name: '12-01'},
        {value: 220, name: '12-01'}
      ],
      chartData3: [],
      compTitle: '品牌分布',
      compTitle1: '车辆超速趋势',
      compTitle3: '车队效率统计',
      colors: ["red", "green"],
      colors1: ['#00B2FF', '#F59A23', '#F2637B', '#CDF988'],
      title: '车辆使用比例',
      listData: [], // 列表数据
      tableCols: [
        { label: "id", prop: "id" },
        { label: "用户名", prop: "loginName" },
        { label: "工号", prop: "userJobNumber" },
        { label: "登录IP", prop: "loginIP" },
        /* {
          label: "操作",
          type: "Button",
          btnList: [
            { type: "primary", label: "查看", handler: (row) => "" },
            { type: "danger", label: "删除", handler: (row) => "" },
          ],
        }, */
      ],
    };
  },
  components: {
    productChild,
    SelfTable,
    CircleChart,
    BarChart,
    LineChart
  },
  created() {
    let user = this.$store.getters.getUser;
    // let user = this.$store.state.userInfo;
    this.getdata(this.formInline);
  },
  mounted() {
    // DOM完全加载完成
  },
  computed: {
    passValueToOnther: function () {
      this.$store.commit("setValue", this.passValue);
      //   return this.passValue
      //   console.log("inputVal = " + val + " , oldValue = " + oldVal);
    },
  },
  methods: {
    // 获取用户数据方法
    getdata(param) {
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 12,
        data: [
          {
            id: 1,
            loginName: "张先生",
            userJobNumber: "002",
            userRealName: "张三",
            loginIP: "192.169.0.0",
            loginTime: "2020/10/28 14:23:45",
            roleName: ["管理员", "普通用户"],
            roleId: ["1", "2"],
          },
          {
            id: 1,
            loginName: "张先生",
            userJobNumber: "002",
            userRealName: "张三",
            loginIP: "192.169.0.0",
            loginTime: "2020/10/28 14:23:45",
            roleName: ["管理员", "普通用户"],
            roleId: ["1", "2"],
          },
          {
            id: 1,
            loginName: "张先生",
            userJobNumber: "002",
            userRealName: "张三",
            loginIP: "192.169.0.0",
            loginTime: "2020/10/28 14:23:45",
            roleName: ["管理员", "普通用户"],
            roleId: ["1", "2"],
          },
          {
            id: 1,
            loginName: "张先生",
            userJobNumber: "002",
            userRealName: "张三",
            loginIP: "192.169.0.0",
            loginTime: "2020/10/28 14:23:45",
            roleName: ["管理员", "普通用户"],
            roleId: ["1", "2"],
          },
        ],
      };
      this.listData = res.data;
      // 分页赋值
      this.pagination.pageNum = this.formInline.pageNum;
      this.pagination.pageSize = this.formInline.pageSize;
      this.pagination.total = res.count;
      // 模拟数据结束
    },
    // 编辑事件
    handleEdit(index, row) {
      console.log(row);
    },
    // 删除事件
    handleDelete(index, row) {
      console.log(row);
    },
    // 分页插件事件
    callFather(param) {
      console.log(param)
      this.formInline.pageNum = param.pageNum;
      this.formInline.pageSize = param.pageSize;
      this.getdata(this.formInline)
    },
    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val;
    },
    init: function () {
      this.passValue = this.$store.state.passValue;
    },
    parentEvent: function () {
      alert("子组件调用父组件的方法");
    },
    showMessageFromChild: function (data) {
      // 通过事件emit获取子组件的信息
      console.log(data);
    },
    getChildEvent: function () {
      // 使用$refs调用子组件的方法
      console.log(this.$refs.child);
      this.$refs.child.childMethod();
    },
    getReverseValue: function () {
      this.isShow = !this.isShow;
      this.buttonName = this.isShow ? "隐藏" : "显示";
    },
    getMessage: function () {
      axios
        .post("/api/Thingworx/Things/APPMAC1000/Services/GetMessages", {
          Num: 10000,
        })
        .then((res) => {
          console.log(res);
        });
    },
    getStatus: function () {
      axios.post("/api/Thingworx/Things/test/Services/test", {}).then((res) => {
        console.log(res);
      });
    },
    setPasswordEncryption: function () {
      axios
        .post(
          "/api/Thingworx/Resources/EncryptionServices/Services/EncryptPropertyValue",
          { data: "123456" }
        )
        .then((res) => {
          this.twxPsd = res.data.rows[0]["result"];
        });
    },
    getUserAddress() {
      let date = new Date().getTime();
      let url = "/api/Thingworx/Users/Administrator";
      axios.get(url, { ts: date }).then((res) => {
        this.userEmail = res["data"];
      });
    },
    setUserAddress() {
      let param = {};
      param = this.userEmail;
      console.log(param);
      param["configurationTables"]["UserExtensions"]["rows"][9]["value"] =
        "Administrator@thingworx.com";
      let url =
        "/api/Thingworx/Users/Administrator?reason=user-extensions%20%3A%20emailAddress%20%3A%20updated%0A";
      axios.put(url, param).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style scoped>
.list {
  height: 300px;
  width: 800px;
  /* overflow: auto; */
  margin-top: 20px;
  margin: 0 auto;
}

.list1 {
  height: 300px;
  width: 800px;
  /* overflow: auto; */
  padding: 20px;
  margin: 0 auto;
}

.operation {
  display: inline-block;
  color: #1890FF;
  cursor: pointer;
}

.p div {
  width: 300px;
  height: 300px;
}

.clear:after {
  content: "";
  display: block;
  clear: both;
}

.a {
  background: red;
  float: left;
}

.b {
  float: left;
  background: blue;
}

.ui_div ul li {
  float: left;
}
</style>

